<template>
  <view>
    <!-- 1.头部搜索框，使用组件，uni-app中，组件不需要注册 -->
    <MySearch></MySearch>
    <!-- 2.轮播图模块 -->
    <swiper
      class="banner"
      autoplay
      circular
      indicator-dots
      indicator-color="rgba(255,255,255,0.3)"
      indicator-active-color="#fff"
    >
      <swiper-item v-for="item in bannerList" :key="item.goods_id">
        <image :src="item.image_src" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
    <!-- 3.导航模块 -->
    <view class="nav">
      <navigator
        :url="item.navigator_url"
        v-for="item in navList"
        :key="item.name"
        :open-type="item.open_type || 'navigate'"
      >
        <image :src="item.image_src" mode="aspectFill"></image>
      </navigator>
    </view>
    <!-- 4.楼层模块 -->
    <view class="floor" v-for="item in floorList" :key="item.name">
      <view class="floor-title">
        <image :src="item.floor_title.image_src" mode="widthFix"></image>
      </view>
      <view class="floor-content">
        <navigator
          v-for="item2 in item.product_list"
          :key="item2.name"
          :url="item2.navigator_url"
          :open-type="item2.open_type"
        >
          <image
            :src="item2.image_src"
            :style="{ width: `${item2.image_width}rpx` }"
          ></image>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      bannerList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    // 获取轮播图数据
    this.getBanner(), this.getNav(), this.getFloor();
  },
  // 页面下拉事件
  async onPullDownRefresh() {
    // 清空原本数据
    this.bannerList = [];
    this.navList = [];
    this.floorList = [];
    // 重新获取页面数据
    await Promise.all([this.getBanner(), this.getNav(), this.getFloor()]);
    // 所有请求完成后，隐藏下拉刷新
    uni.stopPullDownRefresh();
  },
  methods: {
    // 获取轮播图数据
    async getBanner() {
      const [error, res] = await uni.request({
        method: "GET",
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      });
      if (!error) {
        console.log(res);
        this.bannerList = res.data.message;
      } else {
        console.log(error);
      }
    },
    // 获取导航栏数据
    async getNav() {
      const [error, res] = await uni.request({
        method: "GET",
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
      });
      if (!error) {
        console.log(res);
        this.navList = res.data.message;
      } else {
        console.log(error);
      }
    },
    // 获取楼层数据
    async getFloor() {
      const [error, res] = await uni.request({
        method: "GET",
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
      });
      if (!error) {
        console.log(res);
        this.floorList = res.data.message;
      } else {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
// 修改滑块分区大小
.banner {
  width: 750rpx;
  height: 340rpx;
  // 修改滑图片大小
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
.nav {
  padding: 12rpx 0 43rpx 0;
  display: flex;
  justify-content: space-around;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}
.floor {
  .floor-title {
    image {
      width: 100vw;
    }
  }
  .floor-content {
    navigator:nth-child(1) image {
      height: 386rpx;
    }
    image {
      float: left;
      height: 188rpx;
      margin-left: 12rpx;
      margin-bottom: 8rpx;
    }
  }
}
</style>
